<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="分享APP" titleTintColor="#fff"><text slot="back" class="iconfont">&#xe63d;</text></navigation>
		<view class="ewm-v" v-if="recommend.img">
			<image class="img-img" mode="aspectFit" :src="recommend.img"></image>
			<text class="ewm-tip">扫码下载APP</text>
		</view>
		<view class="link-one" v-if="recommend.downloadUrl">
			<view class="link-o-l">{{ recommend.downloadUrl }}</view>
			<view class="link-o-btn" @click="copyText(recommend.downloadUrl)">复制链接</view>
		</view>
		<view class="message">
			<view class="msg-o">推荐APP和好友一起嗨翻天~</view>
			<view class="msg-t">1.使用二维码工具扫描上方二维码</view>
			<view class="msg-th">2.开启下载页面后点击下载</view>
		</view>
		<view class="fun-v">
			<view class="f-v-item one">
				<text class="iconfont">&#xe615;</text>
				推荐好友
			</view>
			<view class="f-v-item two" @click="saveEwm(recommend.img)">
				<text class="iconfont">&#xe607;</text>
				保存二维码
			</view>
		</view>
		<view class="link-two" v-if="recommend.url">
			<view class="o">网页版网址</view>
			<view class="t">{{ recommend.url }}</view>
			<view class="th" @click="copyText(recommend.url)">复制</view>
		</view>
		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
export default {
	components: { Tabbar, navigation },
	data() {
		return {
			recommend: { img: '', shareUrl: '', url: '', downloadUrl: '' } //获取的数据
		};
	},
	onLoad() {
		this.recommendData();
	},
	methods: {
		/**
		 * 复制H5和非H5单独的进行处理
		 * @param {Object} val复制到系统的剪切板中
		 */
		copyText(val) {
			//#ifndef H5
			uni.setClipboardData({
				data: val,
				success: function() {
					VueTools.toastNo('复制成功');
				},
				fail: function() {
					VueTools.toastNo('复制失败');
				}
			});
			//#endif
			//#ifdef H5
			let res = Tools.h5Copy(val);
			if (res === true) {
				VueTools.toastNo('复制成功');
			} else {
				VueTools.toastNo('复制失败');
			}
			//#endif
		},
		/**
		 * 分享
		 */
		share() {},
		/**
		 * 保存图片
		 */
		saveEwm(path) {
			
			//#ifndef H5
			if(Tools.isEmpty(path)){
				VueTools.toastNo('资源不存在，稍后再试');
				return;
			}
			uni.saveImageToPhotosAlbum({
				filePath: path,
				success: function() {
					VueTools.toastNo('保存成功');
				},
				fail: function() {
					VueTools.toastNo('保存失败');
				}
			});
			//#endif
			//#ifdef H5
			VueTools.toastNo('浏览器暂不支持该功能');
			//#endif
		},
		/**
		 * 获取网络数据
		 */
		recommendData() {
			let that = this;
			Net.ayiHttp(
				URL.OTHER_CONFIG,
				'{"type":"recommend","agent":"0"}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						console.log('获取分享APP的数据', data);
						that.recommend = {
							img: Tools.isEmpty(data.images.mobile) ? '' : data.images.mobile,
							shareUrl: Tools.isEmpty(data.mobile.cfg_val) ? '' : data.mobile.cfg_val,
							url: Tools.isEmpty(data.web.cfg_val) ? '' : data.web.cfg_val,
							downloadUrl: Tools.isEmpty(data.mobile.cfg_val) ? '' : data.mobile.cfg_val
						};
						console.log('整理好的数据:---===', that.recommend);
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		}
	},
	onUnload() {}
};
</script>

<style lang="scss">
// 二维码的图片
.ewm-v {
	width: 200px;
	margin: 40px auto 20px;
	.img-img {
		width: 100%;
	}
	.ewm-tip {
		color: #6f6f6f;
		text-align: center;
		font-size: 32rpx;
		display: block;
	}
}
// 第一个链接
.link-one {
	height: 60rpx;
	margin: 40rpx 40rpx 0rpx;
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	.link-o-l {
		color: #a5a5a5;
		height: 40rpx;
		overflow: hidden;
		font-size: 34rpx;
		flex: 230;
	}
	.link-o-btn {
		background: #00a0e9;
		padding: 10rpx 20rpx;
		color: #fff;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		font-size: 34rpx;
		flex: 70;
	}
}
// 描述信息
.message {
	width: 260px;
	margin: 0 auto 40px;
	clear: both;
	font-size: 32rpx;
	.msg-o {
		color: #29acff;
		margin: 20rpx 0rpx;
	}
	.msg-t {
		color: #a5a5a5;
	}
	.msg-th {
		color: #a5a5a5;
	}
}
// 功能按钮
.fun-v {
	height: 80rpx;
	margin: 0 40rpx 40rpx;
	display: flex;
	flex-direction: row;
	.f-v-item {
		flex: 180;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
		&.one {
			border-top-left-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			background: #00a0e9;
		}
		&.two {
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			background: #ffc617;
		}
	}
}
// 网页的链接
.link-two {
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 34rpx;
	margin: 0 40rpx 40rpx;
	height: 40rpx;
	.o {
		flex: 100;
		color: #a5a5a5;
	}
	.t {
		flex: 160;
		color: #29acff;
		width: 8rem;
		overflow: hidden;
	}
	.th {
		flex: 60;
		color: #29acff;
		text-align: right;
	}
}
</style>
